<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆形填充</title>
    <style>
        body{
            height: 100vh;
            width: 100vw;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        canvas{
            border: dashed 2px #ccc;
        }
        button{
            width: 120px;
            height: 42px;
            border: none;
            outline: none;
            color: #f2f2f2;
            background: #30336b;
            box-shadow: 2px 2px 5px #30336b;
            line-height: 42px;
            border-radius: 4px;
            transition: box-shadow .8s;
        }
        button:hover{
            cursor: pointer;
            box-shadow: 2px 2px 15px #30336b;
        }
    </style>
    <script>
        function $$(id){
          return document.getElementById(id);
        }
        function pageLoad(){
            window.start = false;
            window.pointTo = 0;
            window.interval = null;
            // canvas.arc(120, 120, 50, 0 * Math.PI, 2 * Math.PI, 0);
            // canvas.lineWidth=10;
            // canvas.strokeStyle='blue';
            // canvas.stroke();

            //pointFrom = 0;

            // interval = setInterval(function() {
            //     pointTo = pointFrom + 0.1;

            //     console.log('pointFrom : ' + pointFrom);
            //     console.log('pointTo : ' + pointTo);
            //     canvas.arc(200, 150, 100, pointFrom * Math.PI, pointTo * Math.PI, false);
            //     canvas.lineWidth=15;
            //     canvas.lineCap = 'round'
            //     canvas.strokeStyle='#30336b';
            //     canvas.stroke();

            //     pointFrom = pointTo;

            //     if (pointFrom < 0) clearInterval(interval);
            // }, 100);

            
            // cans.arc(200,150,100,0,Math.PI/2,true);
            // cans.closePath();
            // cans.fillStyle = 'green';
            // cans.fill();
            // cans.lineWidth = 20;
            // cans.lineCap = 'round'
            // cans.strokeStyle = '#30336b';
            // cans.stroke();

            let canvas = can.getContext('2d');
            canvas.clearRect(0,0,400,300)
            
            interval = setInterval(function() {
                if(pointTo>360)
                {
                    pointTo=10;
                }
                canvas.lineWidth=15;
                canvas.lineCap = 'round'
                canvas.strokeStyle='#30336b';
                canvas.beginPath();
                canvas.arc(200, 150, 100, 0,pointTo * Math.PI/180, false);
                canvas.stroke();
                canvas.closePath();
                canvas.restore();
                
                pointTo = pointTo+10;
            }, 100);
        }
        
    </script>
</head>
<body onload="pageLoad()">
    <div>
        <canvas id="can" width="400" height="300">4</canvas>
    </div>
    
    <!-- <div>
        <button id="startBtn" onclick="Start();">开始</button>
    </div> -->
</body>
</html>